<template>
  <div class="big-screen-container">
    <div class="header">
      <h1>西山煤电供电系统监控大屏</h1>
      <toolbar
          @zoomIn="handleZoomIn"
          @zoomOut="handleZoomOut"
          @fullscreen="toggleFullscreen"
          @reload="handleReload"
      />
    </div>

    <div class="content">
      <circuit-viewer
          ref="circuitViewer"
          :circuit-data="circuitData"
          :scale="scale"
      />
    </div>
  </div>
</template>

<script>
import CircuitViewer from '@/components/CircuitViewer'
import Toolbar from '@/components/ToolBar'
import screenfull from 'screenfull'

export default {
  components: {
    CircuitViewer,
    Toolbar
  },
  data() {
    return {
      circuitData: null, // 电路图JSON数据
      scale: 1.0, // 初始缩放比例
      iframeUrl: '' // iframe加载的URL
    }
  },
  mounted() {
    this.loadCircuitData()
  },
  methods: {
    loadCircuitData() {
      // 这里模拟从API加载JSON数据
      // 实际项目中应该是axios请求API
      fetch('/circuit-data.json') // 假设JSON文件放在public目录下
          .then(response => response.json())
          .then(data => {
            this.circuitData = data
            // 生成iframe要加载的URL
            this.generateIframeUrl(data)
          })
          .catch(error => {
            console.error('加载电路图数据失败:', error)
            this.$message.error('加载电路图数据失败')
          })
    },
    generateIframeUrl(data) {
      // 这里生成包含电路图数据的URL
      // 实际项目中可能是第三方电路图查看器的URL，带上数据参数
      // 示例：假设有一个专门展示电路图的HTML页面，可以接收JSON数据
      const jsonStr = encodeURIComponent(JSON.stringify(data))
      this.iframeUrl = `/circuit-viewer.html?data=${jsonStr}`
    },
    handleZoomIn() {
      this.scale = Math.min(this.scale + 0.1, 3)
      this.$refs.circuitViewer.setScale(this.scale)
    },
    handleZoomOut() {
      this.scale = Math.max(this.scale - 0.1, 0.5)
      this.$refs.circuitViewer.setScale(this.scale)
    },
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle()
      } else {
        this.$message.warning('您的浏览器不支持全屏功能')
      }
    },
    handleReload() {
      this.loadCircuitData()
    }
  }
}
</script>

<style scoped lang="scss">
.big-screen-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #fff;

  .header {
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;

    h1 {
      margin: 0;
      font-size: 24px;
      font-weight: normal;
    }
  }

  .content {
    flex: 1;
    overflow: hidden;
    position: relative;
  }
}
</style>